<template>
  <div class="detail-box">
    <el-dialog
        v-model="detailDialogVisible"
        title="流程详情"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
        style="height: auto;
        background-color:#fff;
        padding-bottom: 2vh;"
        :close="closeDia"
    >
      <div class="leave-detail-box">
        <div class="top">
          <div class="t1">
            <div class="t1-item">
              <div class="t1-title">凭证编号</div>
              <div class="t1-con">{{ detail_form.bill_no }}</div>
            </div>
            <div class="t1-item">
              <div class="t1-title">原始单据日期</div>
              <div class="t1-con">{{ computeDate(detail_form.bill_date) }}</div>
            </div>
          </div>
          <div class="t1" style="border-bottom: 1px solid rgb(238,238,238);">
            <div class="t1-item">
              <div class="t1-title">关联项目</div>
              <div class="t1-con">{{ detail_form.related_project_name }}</div>
            </div>
            <div class="t1-item">
              <div class="t1-title">下载附件</div>
              <div class="t1-con">
                <el-button @click="downloadFile">
                  下载
                </el-button>
              </div>
            </div>
          </div>
          <div class="t1">
            <div class="t1-item">
              <div class="t1-title">报销人</div>
              <div class="t1-con">{{ detail_form.flow_uploader_name }}</div>
            </div>
            <div class="t1-item">
              <div class="t1-title">总费用金额(元)</div>
              <div class="t1-con">
                <div class="t1-con">{{ detail_form.total_money }}</div>
              </div>
            </div>
          </div>
          <div class="t2" style="height: auto">
            <div class="t2-item">
              <div class="t2-title">费用金额</div>
              <div class="t1-con" style="width: 80%;padding: 1vh 1vw; box-sizing: border-box; margin: 0 auto">
                <el-table :data="billItems" border style="width: 95%">
                  <el-table-column prop="sum" label="金额(元)" width="200"  align="center"/>
                  <el-table-column prop="type" label="类型" width="200"  align="center">
                    <template #default = {row}>
                      <el-tag v-if="row.type === '0'">交通费用</el-tag>
                      <el-tag v-if="row.type === '1'">住宿费用</el-tag>
                      <el-tag v-if="row.type === '2'">餐补费用</el-tag>
                      <el-tag v-if="row.type === '3'">招待费用</el-tag>
                      <el-tag v-if="row.type === '4'">汽油费用</el-tag>
                      <el-tag v-if="row.type === '5'">其他费用</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="detail" label="备注"  align="center"/>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="b1">
            <div class="b1-item">
              <div class="b1-title">审核状态</div>
              <div class="b1-con">
                <div v-if="detail_form.status === 0">已提交</div>
                <div v-if="detail_form.status === 1">审核中</div>
                <div v-if="detail_form.status === 2">已完成</div>
              </div>
            </div>
            <div class="b1-item">
              <div class="b1-title">当前审核人</div>
              <div class="b1-con">{{ detail_form.flow_operator_name }}</div>
            </div>
            <div class="b1-item">
              <div class="b1-title">抄送人</div>
              <div class="b1-con">
                {{ detail_form.copyName ? detail_form.copyName : '无' }}
              </div>
            </div>
          </div>
          <div class="b2" style="border-bottom:1px solid #eeeeee">
            <div class="b2-item">
              <div class="b2-title">审核结果</div>
              <div class="b2-con" v-if="detail_form.result === 1">
                通过
              </div>
              <div class="b2-con" v-if="detail_form.result === 0">
                拒绝
              </div>
              <div class="b2-con" v-if="detail_form.result === null">
                暂无结果
              </div>
            </div>
          </div>
          <div class="b2">
            <div class="b2-item">
              <div class="b2-title">历史审批</div>
              <div class="b2-con" v-if="history_operator.length">
                <p v-for="(item,index) in history_operator" :key="index" style="font-weight: 600; color: #1E90FF">
                  {{ item }}&nbsp;
                  <span v-if="!index === historyOperator.length - 1" style="font-weight: 400; color: black">
                    -> &nbsp;
                  </span>
                </p>
              </div>
              <div class="b2-con" v-else>
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElButton, ElDialog, ElMessage, ElMessageBox, ElTag, ElTable, ElTableColumn} from "element-plus"
import {getALLFlowList, getCurrentFlow, recallFlow} from "@/api"
import {onMounted, reactive, ref, defineEmits} from "vue"
import {useRoute} from "vue-router"
import {downloadAccessory, getBillDetails} from "@/api/Finance/Bill"
import {downSeal} from "@/api/OA/Seal"
import {getFileExtension} from "@/lib/utils"
import {baseurl} from "@/api/http"

const route = useRoute()
const emits = defineEmits(['refreshPassed','refreshRefused','refreshGoing'])

const userId = ref('')
const detailDialogVisible = ref(false)
const historyOperator = ref([])
let detail_form = reactive({})
const history_operator = ref([])
const billItems = ref([])

let currentId

onMounted(()=>{
  history_operator.value = []
  userId.value = getId()
})

const getId = () => {
  const info = JSON.parse(localStorage.getItem('syhyDocManSys'))
  return info.id
}

const getList = async () => {
  try {
    const {data:res} = await getALLFlowList({
      userId : userId.value
    })
    if(res && res.code === 201){
      return ElMessage({
        type:'info',
        message:'暂无请假申请'
      })
    } else if (res && res.code === 200) {
      tableData.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = async (id) => {
  currentId = id
  try {
    const {data:res} = await getBillDetails({
      projectId:id
    })
    if (res.code === 200){
      history_operator.value = []
      detail_form = res.data.data
      for (let i = 0; i < res.data.history.length; i++){
        history_operator.value.push(res.data.history[i])
      }
      billItems.value = JSON.parse(res.data.data.finance_items)
      detailDialogVisible.value = true
    }
    console.log(detail_form)
  } catch (e) {
    console.log(e)
  }
}

const downloadFile = async () => {
  const ext = getFileExtension(detail_form.mime)
  const url = `${baseurl}/downloadAccessory?flowId=${currentId}`
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download',`${detail_form.flow_uploader_name}的报销附件下载.${ext}`); // 设置下载的文件名
  link.style.display = 'none' // 隐藏元素
  document.body.appendChild(link);
  link.click();

  // 清理 DOM 和释放 URL 对象
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}

const computeDate = (date) => {
  return date.substring(0,10)
}

const isLastItem = (index) => {
  console.log(index === historyOperator.value.length - 1)
  return index === historyOperator.value.length - 1
}

const closeDia = () => {
  history_operator.value = []
  detail_form = {}
}

defineExpose({
  showDetails,
})
</script>

<style scoped lang="less">
.detail-box{
  box-sizing: border-box;
  height: 95%;
  :deep(.el-dialog__body) {
    padding-top: 0 !important;
  }
  .leave-detail-box{
    width: 95%;
    .top{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      .t1{
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        display: flex;
        justify-content: space-between;
        .t1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t1-title{
            font-weight: 600;
            text-align: center;
            width: 30%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .t2{
        width: 100%;
        font-size: 1.6vh;
        background-color:#fff;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .t2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t2-title{
            font-weight: 600;
            text-align: center;
            width: 15%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
    .bot{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      .b1{
        display: flex;
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        .b1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b1-title{
            font-weight: 600;
            text-align: center;
            width: 49%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .b2{
        background-color:#fff;
        width: 100%;
        font-size: 1.6vh;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .b2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b2-title{
            font-weight: 600;
            text-align: center;
            width: 14%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
            display: flex;
            line-height: 5vh;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
